import React, { useState } from "react";

import { Table, Tag, Divider, Button, Form } from "antd";
import { get } from "../../../Utils/http";
import axios from "axios";
import "./auth.less";
import ModalBox from "./ModalBox";
import "../../../mock/authList";
import { setListasync, setPage, delFn } from "@/reducer/antd";
import { connect } from "react-redux";
import qs from "qs";
let tagMap = {
  干饭: "magenta",
  敲代码: "red",
  追剧: "pink",
  金铲铲: "orange",
};
function Auth(props) {
  console.log(props);
  const [list, setlist] = React.useState([]);
  const [selectedRowKeys, setselectedRowKeys] = React.useState([]);
  const [val, setval] = React.useState({});
  const [color, setcolor] = React.useState("AuthBox1");
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [title, settitle] = useState("添加");

  React.useEffect(() => {
    if (props.antdList.list.length <= 0) {
      props.setListasync();
    }
    // get("/app/memberAuth", {}).then((res) => {
    //   console.log(res);
    //   setlist(res);
    // });
  }, [props.antdList.list]);
  React.useMemo(() => {}, [props.antdList.list]);

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "住址",
      dataIndex: "address",
    },
    {
      title: "时间",
      dataIndex: "date",
    },
    {
      title: "爱好",
      dataIndex: "hobby",
      render: (tags) => (
        <>
          {Object.values(tags) &&
            Object.values(tags).map((tag) => {
              return (
                <Tag color={tagMap[tag]} key={tag}>
                  {tag.toUpperCase()}
                </Tag>
              );
            })}
        </>
      ),
    },
    {
      title: "操作",
      render: (text, val) => (
        <>
          <Button onClick={addList}>添加</Button>
          <Button onClick={() => delFn(val.id)}>删除</Button>
          <Button onClick={() => infoFn(val)}>详情</Button>
          <Button onClick={() => editFn(val)}>编辑</Button>
        </>
      ),
    },
  ];

  //换颜色
  const theme = () => {
    if (color === "AuthBox1") {
      setcolor("AuthBox2");
      tagMap = {
        干饭: "skyblue",
        敲代码: "green",
        追剧: "red",
        金铲铲: "yellow",
      };
    } else {
      setcolor("AuthBox1");
      tagMap = {
        干饭: "magenta",
        敲代码: "red",
        追剧: "pink",
        金铲铲: "orange",
      };
    }
  };

  // 添加按钮
  const addList = () => {
    setIsModalVisible(true);
    settitle("添加");
    setval({});
  };

  // 刪除
  const delFn = (id) => {
    // console.log(id);
    props.delFn(id);
  };

  // 点击编辑 显示模态框 回填
  const editFn = (val) => {
    settitle("编辑");

    setIsModalVisible(true);
    // setval({ ...val });
    console.log(val);
    setval({ ...val });
  };

  // 详情页
  const infoFn = (val) => {
    console.log(props);
    props.history.push({
      pathname: "/member/info",
      search: qs.stringify({ ...val }),
    });
  };
  return (
    <div className={color}>
      <Button onClick={theme}>换主题颜色</Button>
      <Table
        loading={props.antdList.loading}
        pagination={{
          current: props.antdList.page * 1,
          pageSize: props.antdList.pageSize * 1,
          showSizeChanger: true,
          total: props.antdList.count * 1,
          onChange(a, b) {
            props.setPage({ page: a, pageSize: b });
          },
        }}
        rowSelection={{
          selectedRowKeys: selectedRowKeys,
          onChange(selectKey, selectRow) {
            setselectedRowKeys(selectKey.slice(0, 4));
            console.log(selectKey, selectRow);
          },
          getCheckboxProps: (record) => ({
            disabled:
              !selectedRowKeys.includes(record.id) &&
              selectedRowKeys.length >= 4,
          }),
        }}
        rowKey="id"
        dataSource={props.antdList.list}
        columns={columns}
      />
      <ModalBox
        isModalVisible={isModalVisible}
        setIsModalVisible={setIsModalVisible}
        title={title}
        val={val}
      />
    </div>
  );
}

export default connect(({ antdList }) => ({ antdList }), {
  setListasync,
  setPage,
  delFn,
})(Auth);
